<template>
  <uni-popup ref="popup" type="bottom" @mask-click="confirm">
    <view class="flex-col bg-white content-wrap">
      <view class="flex-row align-center justify-between lineBottom10" style="padding: 20rpx">
        <text @click="reset">重置</text>
        <text class="">高级筛选</text>
        <text @click="confirm" class="text-blue">确定</text>
      </view>

      <view class="lineBottom10 flex-col search-item">
        <text>工单状态</text>
        <view class="flex-row bottom10 flex-wrap">
          <uni-tag @click="statusClick(index)" :inverted="!item.check"
                   v-for="(item, index) in dict.type.gps_workorder_status" :text="item.label" type="success"></uni-tag>
        </view>
      </view>

      <view class="lineBottom10 flex-col search-item">
        <text class="bottom10">工单创建时间</text>
        <uni-datetime-picker v-model="range" type="daterange" @change="timeChange"/>
      </view>

<!--      <view class="lineBottom10 flex-col search-item">-->
<!--        <text>品牌/车系/车型</text>-->
<!--        <brand-series-model style="margin: 20rpx 0" v-model="linkageList" @change="modelChange"></brand-series-model>-->
<!--      </view>-->

      <linkageSelect ref="refLinkageSelect" @change="handleLinkageSelect"/>

      <view class="lineBottom10 flex-col search-item">
        <text>工单类型</text>
        <view class="flex-row bottom10 flex-wrap">
          <uni-tag @click="typeClick(index)" :inverted="!item.check"
                   v-for="(item, index) in dict.type.gps_workorder_type" :text="item.label" type="success"></uni-tag>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>

export default {
  dicts: ["gps_workorder_status", "gps_workorder_type"],
  props: {
    value: {
      type: Object,
      default() {
        return () => {
        }
      }
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(val) {
        this.param = val
      }
    }
  },
  data() {
    return {
      param: {},
      range: [],
      linkageList: []
    }
  },
  methods: {
    open() {
      this.$refs.popup.open()
      let arr = this.$refs.refLinkageSelect.brandList || []
      console.log(arr.length)
      if (arr.length === 0) {
        this.$refs.refLinkageSelect.handleList()
      }
    },

    //品牌/车系/车型
    handleLinkageSelect(val) {
      console.log(val,"-=-==-=-")
      if (!this.param) {
        this.param = {}
      }
      this.$set(this.param, 'brandName', val?.brandName??null)
      this.$set(this.param, 'seriesName', val?.seriesName??null)
      this.$set(this.param, 'modelName', val?.modelName??null)
      this.$set(this.param, 'brandId', val?.brandId??null)
      this.$set(this.param, 'seriesId', val?.seriesId??null)
      this.$set(this.param, 'modelId', val?.modelId??null)
      // this.value.brandName = this.ruleForm.brandName = val.brandName
      // this.value.seriesName = this.ruleForm.seriesName = val.seriesName
      // this.value.modelName = this.ruleForm.modelName = val.modelName
    },
    statusClick(index) {
      this.dict.type.gps_workorder_status.forEach((item, i) => {
        if (index === i) {
          item.check = !item.check
        } else {
          item.check = false
        }
      })
      if (!this.param) {
        this.param = {}
      }
      this.param.workOrderStatus = this.dict.type.gps_workorder_status[index].check ? this.dict.type.gps_workorder_status[index].value : null

      this.$forceUpdate()
    },
    typeClick(index) {
      this.dict.type.gps_workorder_type.forEach((item, i) => {
        if (index === i) {
          item.check = !item.check
        } else {
          item.check = false
        }
      })
      if (!this.param) {
        this.param = {}
      }
      this.param.workOrderType = this.dict.type.gps_workorder_type[index].check ? this.dict.type.gps_workorder_type[index].value : null

      this.$forceUpdate()
    },

    timeChange(val) {
      this.range = val;
      if (!this.param) {
        this.param = {}
      }

      this.$set(this.param, 'createStartTime', (val && val.length > 1) ? val[0] : null)
      this.$set(this.param, 'createEndTime', (val && val.length > 1) ? val[1] : null)

      this.$forceUpdate()
    },

    modelChange(val) {
      console.log('收到', val)
      this.linkageList = val
      if (val) {
        this.param.brandId = val[0] ? val[0].id : ''
        this.param.seriesId = val[1] ? val[1].id : ''
        this.param.modelId = val[2] ? val[2].id : ''
        this.param.brandName = val[0] ? val[0].name : ''
        this.param.seriesName = val[1] ? val[1].name : ''
        this.param.modelName = val[2] ? val[2].name : ''
      } else {
        this.param.brandId = null
        this.param.seriesId = null
        this.param.modelId = null
        this.param.brandName = null
        this.param.seriesName = null
        this.param.modelName = null
      }

      this.$forceUpdate()
    },

    reset() {
      this.$refs.refLinkageSelect.reset()
      this.param = {}
      this.dict.type.gps_workorder_status.forEach((item, i) => {
        item.check = false
      })
      this.dict.type.gps_workorder_type.forEach((item, i) => {
        item.check = false
      })
      this.range = [];
      this.linkageList = [];

      this.$forceUpdate()

      this.confirm();
    },
    confirm() {
      console.log('this.param', this.param)
      this.$emit('input', this.param)
      this.$emit('confirm', this.param)
      this.$refs.popup.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.content-wrap {
  border-radius: 20rpx 20rpx 0 0
}

.search-item {
  padding: 0 20rpx 10rpx
}

uni-tag {
  margin: 20rpx 20rpx 10rpx 0
}

</style>
